<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>房间</title>
    <script src="/static/js/vue.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="/static/js/iview.min.js" type="text/javascript"></script>
    <link href="/static/css/iview.css" rel="stylesheet" type="text/css"/>
    <!--
        此页面是卡牌游戏的必要的demo
        并且因为vue的不算太会,所以在结束回合,换上新牌之后,再次选择卡牌,就获取不到value
    -->
</head>
<body>
<h2 id="roomNum" th:text="${roomNum}">ATTACK!</h2>
<div class="app-4">
    <ol>
        <li v-for="todo in todos">
            <label>
                <input :value="todo.cardType" type="radio"/>
                {{ todo.cardName }}
            </label>
        </li>
    </ol>
</div>

<div id="d5">
    进攻方
    <ol>
        <li v-for="todo in todos">
            <label>
                <input :value="todo.cardType" type="checkbox" v-model="checkedNames"/>
                {{ todo.cardName }}
            </label>
        </li>
    </ol>
    <br>
    <span id="cardTypes">Checked names: {{ checkedNames }}</span>
    <input @click="getCard" type="button" value="结束回合"/>
</div>

<div id="app-6">
    进攻方:{{player.playerName}}
    <div style="color: red">
        {{player.playerHp}}
    </div>
    <div style="color: blue">
        {{player.playerMp}}
    </div>
    <div style="color: yellow">
        {{player.playerSp}}
    </div>
    <input @click="discard" type="button" value="出牌"/>
</div>

<script>
    var roomNum = $("#roomNum").html();     //房间号
    var cardTypes = "";                     //卡牌类型 复数
    var app4;
    var app5;
    var app6;

    //获取所有类型卡牌
    $.ajax({
        url: '/card/list',
        type: "GET",
        success: function (resp) {
            console.log(resp)
            app4 = new Vue({
                el: '.app-4',
                data: {
                    todos: resp
                }
            })
        }
    });

    //抽牌
    $.ajax({
        url: '/card/attackList/getUnusedCard/' + roomNum,
        type: "GET",
        success: function (resp) {
            app5 = new Vue({
                el: '#d5',
                data: {
                    todos: resp,
                    checkedNames: []
                },
                methods: {
                    getCard() {     //结束回合
                        $.ajax({
                            url: '/card/attackList/getUnusedCard/' + roomNum,
                            type: "GET",
                            success: function (res) {
                                console.log(res);
                                // app5.todos.push(res);
                                Vue.set(app5, "todos", res);
                            }
                        })
                    }
                }
            })
        }
    });

    //获取玩家信息
    $.ajax({
        url: '/player/get/' + roomNum + '/attack/1000000000',
        type: "GET",
        success: function (resp) {
            console.log(resp);
            app6 = new Vue({
                el: '#app-6',
                data: {
                    player: resp
                },
                methods: {
                    discard() {          //出牌
                        cardTypes = $("#cardTypes").html();
                        cardTypes = cardTypes.substring(16, cardTypes.indexOf("]"));
                        cardTypes = cardTypes.replace(/\s*/g, "");
                        $.ajax({
                            url: '/player/attackList/discard/' + cardTypes + "/" + roomNum + "/attack",
                            type: "GET",
                            success: function (res) {
                                console.log(res);
                                Vue.set(app6, "player", res);
                                var cardTypesArray = cardTypes.split(",");
                                var array = app5.todos;
                                for (let i = 0; i < array.length; i++) {
                                    for (let j = 0; j < cardTypesArray.length; j++) {
                                        if (array[i].cardType == cardTypesArray[j]) {
                                            delete array[i];
                                            break;
                                        }
                                    }
                                }
                                for (let i = 0; i < array.length; i++) {
                                    if (array[i] == undefined) {
                                        Vue.delete(array, i);
                                    }
                                }
                                Vue.set(app5, "checkedNames", "");
                                cardTypes = "";
                            }
                        })
                    }
                }
            })
        }
    })
</script>
</body>
</html>